<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2021-12-15 13:17:42
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-01 10:39:59
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\confir-receipt\\confir-receipt.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<nz-alert
  style="padding-bottom: 15px"
  nzType="warning"
  nzCloseable
  nzMessage="签收后不可再修改运费，请确保运费等信息准确无误后，再进行签收。"
></nz-alert>

<sv-container col="1">
  <sv label="费用明细">
    <st #st [widthMode]="{ type: 'strict' }" [data]="costDetail" [columns]="columns" bordered="true" [page]="{ show: false }">
      <ng-template st-row="PRE" let-item let-index="index">
        {{item.PRE | currency}}
      </ng-template>
      <ng-template st-row="RECE" let-item let-index="index">
        {{item.RECE | currency}}
      </ng-template>
      <ng-template st-row="BACK" let-item let-index="index">
        {{item.BACK | currency}}
      </ng-template>
      <ng-template st-row="traiPrice" let-item let-index="index">
        {{ item.traiPrice | currency}}
      </ng-template>
      <ng-template st-row="surcharge" let-item let-index="index">
        {{item.surcharge | currency}}
      </ng-template>
    </st>
  </sv>
  <sv label="司机车辆">
    <div>{{ dataInfo?.driverName|| '-' }} / {{dataInfo?.driverPhone || '-' }}/ {{ dataInfo?.carNo || '-' }}</div>
  </sv>
  <sv label="收款人">
    <div>{{ i?.payeeName || '-'}} / {{ i?.payeePhone || '-'}}</div>
  </sv>
  <sv label="回单凭证">
    <nz-upload
      class="avatar-uploader"
      [nzAction]="service.$api_upload_url"
      [nzName]="'multipartFile'"
      nzListType="picture-card"
      [(nzFileList)]="listImagUrls"
      [nzShowButton]="listImagUrls.length < 5"
      [nzPreview]="handlePreview1"
      [nzBeforeUpload]="beforeUpload"
      (nzChange)="handleChange1($event)"
    >
      <div>
        <i nz-icon nzType="plus"></i>
        <div style="margin-top: 8px">请上传图片</div>
      </div>
    </nz-upload>
    <nz-modal [nzVisible]="previewVisible1" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible1 = false">
      <ng-template #modalContent>
        <img [src]="previewImage1" [ngStyle]="{ width: '100%' }" />
      </ng-template>
    </nz-modal>
  </sv>
</sv-container>
<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button nz-button type="submit" nzType="primary" (click)="save()" [nzLoading]="http.loading">确认签收</button>
</div>
